/**
 * Created by huangchao on 15/11/2017.
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './style.less'
import { Input, Checkbox, Cascader, Select, DatePicker } from 'antd'
import {options} from '../../static/data'
import store from 'store'
// import moment from 'moment'
const Option = Select.Option
const { RangePicker } = DatePicker

class HeiQueryText extends Component { // 输入文本类型
  static propTypes = {
    data: PropTypes.object,
    select: PropTypes.func,
    onChange: PropTypes.func,
    showCheckout: PropTypes.any,
    value: PropTypes.string,
  }

  onChange = (e) => {
    const checked = e.target.checked
    const id = this.props.data.id
    this.props.select(checked, id)
  }

  render() {
    // console.log(this.props)
    const { data, onChange, showCheckout, value } = this.props

    return (
      <div className={style.QueryItemWrap}>
        <div className={style.Checkbox}>
          {showCheckout
            ? <Checkbox checked={data.checked} onChange={this.onChange} disabled={data.disabled} /> : null
          }
        </div>
        <div className={style.rigitConnent}>
          <div className={style.name}>{data.name}：</div>
          <div className={style.selectBox}>
            <Input disabled={data.disabled} placeholder={data.placeholder} value={value} onChange={onChange} />
          </div>
        </div>
      </div>
    )
  }
}

class HeiQueryCascader extends Component { // 级联选择类型
  static propTypes = {
    data: PropTypes.object,
    select: PropTypes.func,
    onChange: PropTypes.func,
    showCheckout: PropTypes.any,
  }

  state = {
  }

  onChange = (e) => {
    const checked = e.target.checked
    const id = this.props.data.id
    this.props.select(checked, id)
  }

  render() {
    const {data, onChange, showCheckout} = this.props

    return (
      <div className={style.QueryItemWrap}>
        <div className={style.Checkbox}>
          {showCheckout
            ? <Checkbox checked={data.checked} onChange={this.onChange} disabled={data.disabled} /> : null
          }
        </div>
        <div className={style.rigitConnent}>
          <div className={style.name}>{data.name}：</div>
          <div className={style.selectBox}>
            <Cascader options={options} onChange={onChange} placeholder={data.placeholder} />
          </div>
        </div>
      </div>
    )
  }
}

class HeiQuerySelect extends Component { // 下拉选项
  static propTypes = {
    data: PropTypes.object,
    select: PropTypes.func,
  }

  state = {
  }

  onChange = (e) => {
    const checked = e.target.checked
    const id = this.props.data.id
    // console.log(checked, id)
    this.props.select(checked, id)
  }

  render() {
    const data = this.props.data
    const props = {...this.props}
    delete props.select
    const quertList = store.get('crm:queryList') || {}
    const list = quertList[data.keyword] || []
    return (
      <div className={style.QueryItemWrap}>
        <div className={style.Checkbox}>
          {props.showCheckout
            ? <Checkbox checked={data.checked} onChange={this.onChange} disabled={data.disabled} /> : null
          }
        </div>
        <div className={style.rigitConnent}>
          <div className={style.name}>{data.name}：</div>
          <div className={style.selectBox}>
            <Select {...props}
              disabled={data.disabled}
              defaultValue={String(data.defaultValue)}
              className={style.select}
              placeholder={data.placeholder}>
              {
                list.map((d, i) => {
                  return (
                    <Option disabled={d.disabled} key={i} value={String(d.id)}>{d.dictName}</Option>
                  )
                })
              }
            </Select>
          </div>
        </div>
      </div>
    )
  }
}

class HeiQueryTime extends Component { // 日期选择器
  static propTypes = {
    data: PropTypes.object,
    onChange: PropTypes.func,
    select: PropTypes.func,
    showCheckout: PropTypes.any,
  }

  state = {
  }

  onChangeCheckbox = (e) => {
    const checked = e.target.checked
    const id = this.props.data.id
    this.props.select(checked, id)
  }

  onChange = (data, datastring) => {
    // console.log(data)
    this.props.onChange(datastring)
  }

  render() {
    const data = this.props.data
    // console.log(this.props)
    // const defaultValue = data.defaultValue || []
    // console.log(data)    defaultValue={[moment(defaultValue[0]), moment(defaultValue[1])]}
    return (
      <div className={style.QueryItemWrap}>
        <div className={style.Checkbox}>
          {this.props.showCheckout
            ? <Checkbox checked={data.checked} onChange={this.onChangeCheckbox} disabled={data.disabled} /> : null
          }
        </div>
        <div className={style.rigitConnent}>
          <div className={style.name}>{data.name}：</div>
          <div className={style.selectBox}>
            <RangePicker
              disabled={data.disabled}
              onChange={this.onChange} />
          </div>
        </div>
      </div>
    )
  }
}

export {
  HeiQueryText,
  HeiQueryCascader,
  HeiQuerySelect,
  HeiQueryTime,
}
